<template>
  <div>

	<myheader></myheader>


	<br /><br />

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
		<table>
			<tr>
						
						<td>

							用户名:
							
						</td>

						<td>

							<input type="text" v-model="username" placeholder="请输入用户名" />
							
						</td>


					</tr>

					<tr>
						
						<td>

							密 码:
							
						</td>

						<td>

							<input type="password" v-model="password" />
							
						</td>


					</tr>

			<tr>
						
						<td>

							验证码:
							
						</td>

						<td>

							<input type="text" v-model="code" />

						</td>

					</tr>
					<tr>

						<td></td>
						
						<td> 

							<img class="imgcode" alt="点击刷新" :src="src"  @click="changecode" />

						</td>

					</tr>

					<tr>

						<td></td>
						
						<td> 

							<!--滑块验证码-->
							<drag-verify

							:width="width"
							:height="height"
							:text="text"
							ref="Verify"

							></drag-verify>

						</td>

					</tr>

			

			

					<tr>

						<td></td>
						
						<td> <Button @click="submit" color="blue">登 录</Button> </td>

					</tr>
			</table>

		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>
<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';
//导入滑块验证码
import dragVerify from 'vue-drag-verify'; 

export default {
    data() {
        return {
            datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
            username:'',
			password:'',
			//声明滑块验证码相关数据
			width:320,
			height:42,
			text:'请将滑块拖动到右边',
			 //验证码图片地址
			src:'http://localhost:8000/code/',
			//验证码
			code:'',
        }
    },
    //定义组件
    components:{
        'myheader':myheader,
		'myfooter':myfooter,
		'dragVerify':dragVerify
        
    },
    methods: {
		//刷新验证码
  	changecode:function(){

  		//生成随机数
  		var num = Math.ceil(Math.random()*10);

  		//进行传参
  		this.src = this.src + "?num=" + num;

  	},
        //提交事件
	submit:function(){

		//判断是否拖动
  		console.log(this.$refs.Verify.isPassing);

		//判断
		if(this.username == ''){

			//alert('用户名不能为空');
			this.$Message('用户名不能为空');
			return false;
		}

		if(this.password == ''){

		alert('密码不能为空');
		return false;
		}


		//请求后台接口
		this.axios.get('http://localhost:8000/login/',{params:{username:this.username,password:this.password,code:this.code}}).then((result) =>{


  			console.log(result);

  			if(result.data.code==200){

  			//登录成功
  			localStorage.setItem("username",result.data.username);
  			localStorage.setItem("uid",result.data.uid);

  			this.$Message(result.data.message);

  			//跳转页面
  			this.$router.push('/');

  		}else{

  			this.$Notice(result.data.message);

  		}



		});


	}
    },
}
</script>